<template>
    <van-nav-bar
  title="刮刮乐"
  left-arrow
  @click="back"
/>
  <div class="scratchcard">
    <img src="../../image/a31.png" alt="">
    <nutbig-scratch-card :content="randomPrize"></nutbig-scratch-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// 返回上一页
const back = () => {
  router.go(-1);
};

// 奖品列表，可根据实际情况添加更多奖品选项
const prizeList = ref([
  { prize: '恭喜你,中了100元！' },
  { prize: '恭喜你,中了200元！' },
  { prize: '恭喜你,中了300元！' },
  { prize: '恭喜你,中了400元！' },
  { prize: '很遗憾,未中奖，感谢参与！' }
]);

// 计算属性，用于随机获取一个奖品内容
const randomPrize = computed(() => {
  const randomIndex = Math.floor(Math.random() * prizeList.value.length);
  return prizeList.value[randomIndex].prize;
});

</script>

<style>
.scratchcard{
    width: 100%;
    height: 6.65rem;
    position: relative;
}
.scratchcard img{
    width: 100%;
    height: 100%;
}
canvas {
  position: absolute;
  top: 3.96rem;
  left: 1.175rem;
  z-index: 1;
  
}
.nutbig-scratch-card{
    width: 1.85rem!important;
    height:.4rem!important;
    position: absolute;
    top: -2.74rem;
    left: 1.18rem;
    font-size:.1rem;
}
</style>